<template>
  <div id="container">
    <h4
      style="font-family:'Helvetica Neue';text-align: left;color: #f22d00;font-weight: bolder"
      v-on:click=""
    >
      <em class="el-icon-star-off"></em>~~~{{ name_f }}
    </h4>
    <h1>商品详情</h1>
    <br />
    <el-row>
      <div class="pro_detail">
        <div class="pro_img">
          <img :src="get_image(this.phone)" class="image" />
        </div>
        <div class="pro_meg">
          <div class="pro_meg_hd">
            <h3>{{ name }}</h3>
          </div>
          <div class="pro_meg_price">
            <dl>
              <dt>促销价</dt>
              <dd>
                <div class="promo_price">
                  <span class="tm-price">￥{{ price }}</span>
                  <b>优惠促销</b>
                </div>
              </dd>
            </dl>
            <dl>
              <dt>市场价</dt>
              <dd class="nor_price">￥{{ p_price }}</dd>
            </dl>
            <dl>
              <dt>本店优惠</dt>
              <dd>包邮</dd>
            </dl>
            <dl>
              <dt class="sale_tip">
                商品介绍 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ details }}
              </dt>
            </dl>
            <dl>
              <dt>服务承诺</dt>
              <dd>
                <span>正品保证</span>
                <span>极速退货</span>
              </dd>
            </dl>
          </div>
          <div class="pro_meg_deliver">
            <dl>
              <dt>运费</dt>
              <dd>
                电子科技大学中山学院&nbsp;&nbsp;至&nbsp;&nbsp;everywhere&nbsp;&nbsp;&nbsp;快递:0.00
              </dd>
            </dl>
          </div>
          <div class="pro_meg_console">
            <dl class="tb-sku">
              <dt>数量:</dt>
              <dd>
                <span>库存</span><em>{{ Store_number }}</em
                ><span>件</span>
              </dd>
            </dl>
            <dl class="tb-sku">
              <dt>销量:</dt>
              <dd>
                <em>{{ sale_num }}</em
                ><span>件</span>
              </dd>
            </dl>
            <div class="shopping_car">
              <el-button type="danger" v-on:click="go_add_order(id)"
                >立即购买</el-button
              >
              <el-button type="danger">加入购物车</el-button>
            </div>
          </div>
        </div>
      </div>
      <div class="pro_comment">
        <h3>商品评价</h3>
        <div>
          <div
            class="media"
            v-for="(comment, index) in goodsComment"
            :key="index"
          >
            <div class="media-body">
              <!--              <h6 class="media-heading" v-if="comment.user_nickname">用户:&nbsp;{{ comment.user_nickname }}</h6>-->
              <!--              <h6 class="media-heading" v-else>用户:&nbsp;{{ comment.user_name | nameFormat }}</h6>-->
              <span>评论:</span>&nbsp;{{ comment.comment_detail }}
              <el-rate
                v-model="comment.comment_rating"
                disabled
                show-score
                text-color="#ff9900"
              >
              </el-rate>
            </div>
          </div>
        </div>
        <div class="media">
          <template>
            <el-table :data="assress_data" style="width: 100%">
              <el-table-column prop="评价用户名" label="评价用户" width="180">
              </el-table-column>
              <el-table-column prop="评价内容" label="评价内容" width="180">
              </el-table-column>
              <el-table-column prop="评价时间" label="评价时间" width="180">
              </el-table-column>
            </el-table>
          </template>
        </div>
      </div>
    </el-row>
  </div>
</template>

<script>
import qs from "qs";
import axios from "axios";

const BASE_URL = "http://127.0.0.1:8886";

export default {
  created() {},
  data() {
    return {
      fits: [],
      assress_data: [],
      id: "",
      details: "", //商品介绍
      price: 0, //商品价格
      p_price: 0, //pre价格
      name_f: "", //商品分类名称
      name: "", //商品名称
      phone: "", //商品封面
      Store_number: 0, //商品库存
      com: "", //商品评论数
      sale_num: 0 //商品销量
    };
  },
  mounted() {
    this.getdata();
    this.get_assress();
  },
  methods: {
    goTo(path) {
      this.$router.replace(path);
    },
    flush() {
      this.getdata();
      this.get_assress();
    },
    getdata() {
      //读取home 传来的参数 name  id
      // console.log("fff"+this.getpar('name'));
      axios
        .post(
          BASE_URL + "/commodity/get_commodity_info",
          qs.stringify({ id: this.getpar("id") }),
          { headers: { "Content-Type": "application/x-www-form-urlencoded" } }
        )
        .then(re => {
          console.log(re.data.备注);
          if (re.data.状态码 === 200) {
            this.price = re.data.商品价格;
            this.p_price = 1.25 * re.data.商品价格;
            this.details = re.data.商品介绍;
            this.name = re.data.商品名称;
            this.name_f = re.data.商品分类名称;
            this.Store_number = re.data.商品库存;
            this.sale_num = re.data.商品销量;
            this.phone = re.data.商品封面;
            this.id = re.data.商品id;

            console.log(this.price);
          } else {
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    get_assress() {
      //读取home 传来的参数 name  id
      // console.log("fff"+this.getpar('name'));
      axios
        .post(
          BASE_URL + "/assess/get_commodity_assess_list",
          qs.stringify({ commodity_id: this.getpar("id") }),
          { headers: { "Content-Type": "application/x-www-form-urlencoded" } }
        )
        .then(re => {
          console.log(re.data.备注);
          if (re.data.状态码 === 200) {
            this.assress_data = re.data.列表;
          } else {
            console.log(this.data.备注);
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    go_add_order(id) {
      this.$router.push("/add_order?id=" + id);
    },
    getpar(par) {
      //获取当前URL
      let local_url = document.location.href;
      //获取要取得的get参数位置
      let get = local_url.indexOf(par + "=");
      if (get == -1) {
        return "";
      }
      //截取字符串
      let get_par = local_url.slice(par.length + get + 1);
      //判断截取后的字符串是否还有其他get参数
      let nextPar = get_par.indexOf("&");
      if (nextPar != -1) {
        get_par = get_par.slice(0, nextPar);
      }
      nextPar = get_par.indexOf("?");
      if (nextPar != -1) {
        get_par = get_par.slice(0, nextPar);
      }
      nextPar = get_par.indexOf("#");
      if (nextPar != -1) {
        get_par = get_par.slice(0, nextPar);
      }
      return decodeURI(get_par);
    },
    get_image(
      id //图片的
    ) {
      return BASE_URL + "/images/small/" + id + ".jpg";
    }
  },
  watch: {
    $route: "flush"
  }
};
</script>

<style scoped>
#container {
  width: 100%;
  height: 100%;
  /* background-color: #f3f3f3; */
}
h1 {
  font-family: "微软雅黑";
  color: #000000;
  width: auto;
  height: 20px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
}
.pro_detail {
  width: 990px;
  position: relative;
  z-index: 100;
  margin: 20px auto;
}
.pro_comment {
  width: 73%;
  position: relative;
  margin: 40px auto 0;
  padding: 20px;
  border: 1px solid #ccc;
  border-bottom: none;
}
.pro_judge {
  width: 73%;
  position: relative;
  margin: 0 auto 60px;
  padding: 20px;
  border-top: none;
  border: 1px solid #ccc;
}
.pro_judge > span {
  font-size: 12px;
  color: #ccc;
}
.pro_judge > .el-rate {
  display: inline-block;
}
.pro_judge .el-textarea {
  width: 50%;
  display: block;
  margin: 20px 0;
}
.pro_comment > h3 {
  font-weight: bold;
  margin-bottom: 20px;
}
.pro_comment .media {
  border-top: 1px dashed #ccc;
  padding: 10px 0;
}
.pro_comment .media .media-heading {
  margin-bottom: 10px;
  font-weight: bolder;
}
.pro_comment .media .media-body {
  font-size: 14px;
}
.pro_comment .media .media-body span {
  font-weight: bolder;
}
.pro_comment .el-rate {
  display: inline-block;
  margin-left: 20px;
}
.pro_judge > h3 {
  font-weight: bold;
  margin-bottom: 20px;
}
.pro_judge .judge_erro_tip {
  font-size: 15px;
  font-weight: bolder;
  color: #000;
}
.pro_detail > .pro_img {
  float: left;
  position: relative;
  padding: 0px 0;
  width: 480px;
  border: 1px solid #ccc;
  text-align: center;
}
.pro_detail > .pro_img img {
  width: 500px;
  height: 450px;
}
.pro_img > .tb_booth {
  position: relative;
  z-index: 1;
}
.tb_booth > .pro_middle_img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}
.pro_detail > .pro_meg {
  margin: 0 0 0 520px;
  color: #666;
  padding: 0 0 3px;
}
.pro_meg > .pro_meg_hd {
  padding: 0 10px 12px;
  color: #000;
}
.pro_meg_hd > h1 {
  font-size: 16px;
  font-weight: 700;
  color: #000;
}
.pro_meg > .pro_meg_price {
  padding: 5px 20px;
  height: 200px;
  background-color: rgba(247, 244, 244, 0.6);

  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.pro_meg_price dl {
  display: flex;
  align-items: center;

  margin-bottom: 0 !important;
  cursor: pointer;
}
.pro_meg_price dl dt {
  width: 70px;
  color: #999;
  font-size: 12px;
}
.pro_meg_price dl dd {
  margin-bottom: 0 !important;
  font-family: Arial;
}
.pro_meg_price dl dd div {
  display: flex;
  align-items: center;
}
.pro_meg_price dl:last-child dd {
  color: #ff0036;
  font-weight: bold;
  font-size: 12px;
}
.promo_price {
  line-height: 24px;
  vertical-align: middle;
  color: #ff0036;
  font-size: 18px;
  font-family: Arial;
  -webkit-font-smoothing: antialiased;
}
.promo_price b {
  display: inline-block;
  font-weight: normal;
}
.promo_price b:last-child {
  font-size: 12px;
  background: #f47a86;
  color: white;
  padding: 0 6px;
}
.promo_price > .tm-price {
  font-size: 20px;
  display: inline-block;
  margin-right: 12px;
  font-weight: bold;
}
.nor_price {
  text-decoration: line-through;
}
.sale_tip {
  color: #ff0036 !important;
  font-weight: bolder;
  width: 391px !important;
}
.pro_meg_deliver {
  margin: 5px 20px -15px 0;
  padding: 5px;
}
.pro_meg_deliver dl {
  padding: 5px;
  font-size: 14px;
  color: black;
  cursor: pointer;
}
.pro_meg_deliver dl dt {
  color: #999;
  font-size: 14px;
  text-align: left;
  width: 69px;
  margin: 0 0 0 8px;
  float: left;
}
.pro_meg_deliver dl dd {
  font-size: 13px;
}
.pro_meg_console {
  margin: 5px 20px 5px 0;
  padding: 5px;
}
.tb-sku {
  padding: 5px;
  font-size: 14px;
  color: black;
  cursor: pointer;
}
.tb-sku dt {
  color: #999;
  font-size: 14px;
  text-align: left;
  width: 69px;
  margin: 0 0 0 8px;
  float: left;
}
.tb-sku dd {
  font-size: 13px;
}
.tb-sku dd div {
  display: inline-block;
  margin-right: 20px;
}
.item-amout {
  height: 25px;
}
.item-amout a {
  display: inline-block;
  height: 23px;
  width: 17px;
  border: 1px solid #e5e5e5;
  background: #f0f0f0;
  text-align: center;
  line-height: 23px;
  color: #444;
  cursor: pointer;
}
.item-amout a:hover {
  color: #f50;
  border-color: #f60;
}
.item-amout > .text_amount {
  width: 40px;
  height: 20px;
  text-align: center;
  display: inline-block;
}
.shopping_car {
  margin: 20px auto 0;

  display: flex;
  justify-content: center;
}
.shopping_car button {
  outline: none;
}
</style>

